<template>
    <div class="divnn">
        <!-- <div
            style="width: 100%;height:100px;position: fixed;top:200px;line-height: 100px;font-size: 50px;color: red;opacity: 0.5;;">
            技术提供试用
        </div> -->
        <div class="por">
            <div class="shouzhi anniu " v-if="items.service_url" @click="kefu">联系客服</div>
            <div class="shouzhi anniu " @click="gopage">我的订单</div>
        </div>
        <div class="leftboxs">
            <img class="logo" src="../../assets/logoss.png" />
            <div class="zhifu">订单支付</div>
            <div class="xinxi">
                <div>
                    <span>软件版本：</span>
                    <div class="neirong">
                        {{ datas.type_name }}
                    </div>
                </div>
                <div>
                    <span>安装说明：</span>
                    <div class="neirong">
                        {{ datas.install_desc }}
                    </div>
                </div>
                <div>
                    <span>应付金额：</span>
                    <div class="neirong" style="color:red">
                        {{ datas.total_price }}
                    </div>
                </div>
                <div>
                    <span>扫码支付:</span>
                    <div class="erweimabox neirong" style="margin-top:16px;">
                        <QRCodeGenerator ref="erweima"></QRCodeGenerator>
                    </div>
                    <div class="btnss" style="margin-top:16px">
                        <div class="wx zf shouzhi" v-if="datas.is_wechat == 1" :class="pay_type == '1' ? 'borders' : ''"
                            @click="wx">
                            <img class="types" src="../../assets/png1s.png" />
                            <span>微信支付</span>
                        </div>
                        <div class="zfb zf shouzhi" v-if="datas.is_alipay == 1" :class="pay_type == '2' ? 'borders' : ''"
                            @click="zfb">
                            <img class="types" src="../../assets/png2s.png" />
                            <span>支付宝支付</span>
                        </div>
                        <div class="btn shouzhi " @click="goback">重新选择</div>
                    </div>
                </div>
                <div class="tishi2">安装程序将在付款后运行.</div>
            </div>

            <img class="logo2" src="../../assets/logo2.png" />
        </div>

        <div v-if="showDialog" class="confirm-dialog-overlay">
            <div class="confirm-dialog">
                <div class="svgbox">
                    <div class="sgvss">
                        <svg :class="svg" t="1750433017778" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4532" width="80" height="80">
                            <path
                                d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0zM792.014 390.378 458.26 724.13c-7.81 7.81-20.474 7.81-28.284 0l-197.99-197.99c-7.81-7.808-7.81-20.472 0-28.282l62.226-62.224c7.81-7.812 20.474-7.81 28.284 0l121.624 121.62 257.388-257.386c7.81-7.81 20.472-7.81 28.284 0l62.224 62.226C799.824 369.904 799.826 382.568 792.014 390.378z"
                                p-id="4533" fill="#07db16"></path>
                        </svg>
                    </div>
                </div>
                <p style="font-weight:bold ">付款成功</p>
                <div class="dialog-buttons">
                    <button @click="confirmClose">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { EventBus } from '../event-bus.js'
import axios from 'axios';
import QRCodeGenerator from "../modle/QRCodeGenerator.vue"
export default {
    name: "indexS",
    data() {
        return {
            showDialog: false,
            is_use_discount: 0,
            items: {},
            pay_type: '1',
            url: "http://hj.xiaoyutongxue.com",
            datas: {
                install_desc: "",
                is_alipay: 1,
                is_show_order: 0,
                is_wechat: 1,
                order_id: "110",
                qr_code: "",
                total_price: "",
                type_name: "",
            }
        };
    }, computed: {
    },
    components: { QRCodeGenerator },
    filters: {
        getmoney(value) {
            return value.split("/")[0];
        },
    },
    created() {
        this.payorder()
        // this.datas = JSON.parse(this.$route.query.datas)
        this.datas = JSON.parse(localStorage.getItem("dingdan"))
        if (localStorage.getItem("duibi") == localStorage.getItem('mobile')) {
            this.closeapi()
        }
        EventBus.$on('closewin', data => {

            let datas = JSON.parse(data)
            console.log(datas)
            console.log(datas.discount_money)

            if (Number(datas.discount_money) > 0) {
                this.is_use_discount = 1
                localStorage.setItem("duibi", localStorage.getItem("mobile"))
                this.closeapi()
            } else {
                this.is_use_discount = 0
                if (this.pay_type == '1') {
                    this.wx()
                } else {
                    this.zfb()
                }
            }
        })
        console.log(this.datas)
        this.getxinxi()
        setTimeout(() => {
            this.$refs.erweima.generateQRCode(this.datas.qr_code)
        }, 200);
        console.log(this.$route.query)
    },
    methods: {
        closeapi() {
            axios.get(this.url + "/api/index/get_order_info?order_id=" + this.datas.order_id)
                .then(response => {
                    this.datas = response.data.data
                    localStorage.setItem("dingdan", JSON.stringify(response.data.data))
                    this.$refs.erweima.generateQRCode(this.datas.qr_code)
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        confirmClose() {
            this.showDialog = false
            this.$router.push({
                path: '/orderlist'
            })
        },
        payorder() {
            setTimeout(() => {
                this.checkpay()
            }, 6000);
        },
        checkpay() {
            axios.get(this.url + '/api/index/check_order?order_id=' + this.datas.order_id)
                .then(response => {
                    console.log(response.data);
                    if (response.data.data.status == 0) {
                        this.payorder()
                    } else {
                        this.showDialog = true
                        EventBus.$emit('haspayorder', true)
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        getxinxi() {
            axios.get(this.url + '/api/index/get_info?type_id=' + 1)
                .then(response => {
                    console.log(response.data);
                    this.items = response.data.data
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        async kefu() {
            const { ipcRenderer } = require('electron')
            await ipcRenderer.invoke('open-external-link', this.items.service_url)
        },
        gopage() {
            this.$router.push({
                path: '/orderlist'
            })
        },
        wx() {
            this.pay_type = '1'
            axios.get(this.url + "/api/index/change_payment?order_id=" + this.datas.order_id + "&pay_type=" + this.pay_type)
                .then(response => {
                    console.log(response)
                    this.$refs.erweima.generateQRCode(response.data.data.qr_code)
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        zfb() {
            this.pay_type = '2'
            axios.get(this.url + "/api/index/change_payment?order_id=" + this.datas.order_id + "&pay_type=" + this.pay_type)
                .then(response => {
                    console.log(response)
                    this.$refs.erweima.generateQRCode(response.data.data.qr_code)
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        goback() {
            this.$router.go(-1)
        },
        myorder() {
            this.$router.push({
                path: '/orderlist'
            })
        },
    },
};
</script>
<style  scoped>
.svgbox {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(30, 255, 56, 0.2);
    margin: 0 auto;
}

.sgvss {

    height: 80px;
    border-radius: 50%;
    width: 80px;
    background: white;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.svg {
    width: 100px;
    background: white;
}

.tishi2 {
    color: #999;
    text-align: left;
    margin-left: 90px;
    font-size: 16px;
}

.shuiyin {}

.btnss {

    margin-left: 20px;
}

.btnss .wx {
    /* background: white url("../../assets/png1.png"); */
    background-size: cover;
    border-radius: 6px;
    margin: 8px 0;
    background-position: center;
}

.btnss .zfb {
    /* background: white url("../../assets/png2.png"); */
    background-size: cover;
    border-radius: 6px;
    margin: 8px 0;
    background-position: center;
}

.zf {
    border: solid 1px white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1)
}

.zf .types {
    width: 30px;
    height: 30px;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    margin-left: 15px;
    float: left;
}

.zf span {
    float: left;
    margin-left: 15px;
    font-weight: bold;
}

.zf:hover {
    border: solid 1px rgb(124, 189, 255);
}

.borders {
    border: solid 1px rgb(124, 189, 255);
}

.btn {
    background: rgb(35, 142, 250) !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    color: white;
    border-radius: 6px;
    margin: 8px 0 !important;
    transition: all 0.4s;
}

.btn:hover {
    background: rgb(0, 65, 216) !important;
    transition: all 0.4s;
}

.neirong {
    /* margin-left: 40px; */
}

.btnss {
    float: left;
}

.btnss div {
    width: 170px;
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    background: white;
}

.btnss img {
    height: 100%;
    display: block;
}

.btnss img {
    width: 100px;
    height: 50px;
    background: white;
}

.zhifu {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.xinxi {
    margin-top: 20px;
}

.erweimabox {
    width: 180px;
    height: 180px;
}

.xinxi {}

.xinxi>div {
    overflow: hidden;
    font-weight: bold;
    line-height: 50px;
}

.xinxi>div>div {
    float: left;
}

.xinxi>div>span {
    display: block;
    float: left;
    padding-right: 20px;
}

.logo2 {
    height: 50px;
    display: block;
    margin-top: 50px;
    position: absolute;
    bottom: 30px;
}

.logo {
    width: 400px;
    display: block;
}

.leftboxs {
    padding: 30px;
    background: linear-gradient(to right,
            rgba(248, 248, 248, 1) 0%,
            /* 0% 位置完全不透明 */
            rgba(248, 248, 248, 0.75) 25%,
            /* 25% 位置 75% 不透明 */
            rgba(248, 248, 248, 1) 50%,
            /* 50% 位置 50% 不透明 */
            rgba(248, 248, 248, 1) 75%,
            /* 75% 位置 25% 不透明 */
            rgba(248, 248, 248, 0) 100%
            /* 100% 位置完全透明 */
        );
    width: 70%;
    height: 100vh;
    padding-right: 20%;
    box-sizing: border-box;
}

.por {
    position: fixed;
    right: 40px;
    top: 30px;
    display: flex;
}

.por div {
    width: 120px;
    height: 50px;
    background: rgb(35, 142, 250);
    color: white;
    line-height: 50px;
    border-radius: 5px;
    margin: 0 5px;
}

.divnn {
    min-height: 100vh;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: url("http://hj.xiaoyutongxue.com/static/images/bk.png");
    background-size: cover;
    background-position: center;
}


.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.confirm-dialog {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    padding-top: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.confirm-dialog h3 {
    margin-top: 0;
    color: #333;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;


}

.dialog-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: rgb(35, 142, 250) !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    color: white !important;
    border-radius: 6px;
    transition: all 0.4s;
    font-size: 15px;
    padding: 10px 30px;
    width: 200px;
}

.dialog-buttons button:first-child {
    background-color: #f56c6c;
    color: white;
}

.dialog-buttons button:last-child {
    background-color: #f0f0f0;
    color: #333;
}
</style>